<template>
  <layout title="任务详情" :showD="false" :showBack="true" :showHome="false">
    <main>
      <div class="task">
        <span class="title">{{ title }}</span>
        <span class="changeColor">￥{{ price }}</span>
      </div>
      <div class="upload">
        <textarea name="描述" id="" class="input">
无敌腹黑无怪乎会送色欸黑v发v、</textarea
        >
        <van-image
          width="100"
          height="100"
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
        <van-image
          width="100"
          height="100"
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
      </div>

      <van-sticky :offset-top="520">
        <van-button
          round
          color="#fab57c"
          type="info"
          block
          @click="changeEvt(id)"
          >接单</van-button
        >
      </van-sticky>
    </main>
  </layout>
</template>

<script>
import { editTaskApi, StatusApi } from "@/apis/hallApi";
import { UserApi } from '@/apis/signApi'
export default {
  data() {
    return {
      userId: '',
      userInfo: {},
      title: "",
      price: "",
      id: "",
      fileList: [],
      status: "",
    };
  },
  created() {
    this.title = this.$route.query.title
    this.price = this.$route.query.price
    this.id = this.$route.query.id;
    this.getUser();
  },
  methods: {
    async getUser() {
      this.userId = this.$store.getters["common/userId"];
      const result = await UserApi(this.userId);
      this.userInfo = result;
    },
    changeEvt(id) {
      if (this.userInfo.active === 2 && this.userInfo.sign === 1) {
        StatusApi(id, 1).then((d) => {});
        editTaskApi(id, { user: 1 });
        this.$dialog
          .alert({
            title: "接单成功提醒",
            message: "已经成功接单啦~~~~，去列表查看哦",
          })
          .then(() => {
            this.$router.push("/list");
          });
      } else {
        this.$toast.fail("清先完成注册流程");
      }
    },
  },
};
</script>

<style lang="less" scoped>
@import "@/style/common.less";
.van-image {
  margin-right: 20px;
}
main {
  text-align: center;
  height: 100%;
  width: 100%;
  background: #f9fafb;
  > .task {
    padding: 0 20px;
    margin: auto;
    margin-top: 20px;
    text-align: center;
    width: 75vw;
    height: 50px;
    line-height: 50px;
    display: flex;
    border-radius: 20px;
    background-image: linear-gradient(to right, #fae5d2, #ffc18e);
    justify-content: space-between;
    margin-bottom: 15px;
    > .title {
      font-size: 0.8rem;
      font-weight: 600;
      color: @c1;
    }
    > .changeColor {
      font-size: 0.7rem;
      color: @a4;
    }
  }
  > .upload {
    font-size: 0.8rem;
    margin: auto;
    padding: 10px 5px;
    background: #fff;
    > .input {
      border: #999;
      outline: none;
      width: 330px;
      height: 180px;
      background: #f9fafb;
      margin-bottom: 15px;
      > .photo {
      }
    }
  }
  .van-button {
    margin: auto;
    width: 90vw;
  }
}
</style>
